<template>
  <div class="userDataPage">
    <div class="searchBox">
      <el-form
        :inline="true"
        :model="params"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col>
            <el-form-item label="用户名称：" prop="name">
              <el-input
                v-model="params.name"
                placeholder="请输入用户名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="用户类型：" prop="role">
              <el-select v-model="params.role" placeholder="请选择用户类型">
                <el-option label="用户" value="user"></el-option>
                <el-option label="管理员" value="admin"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="用户状态：" prop="status">
              <el-select v-model="params.status" placeholder="请选择用户状态">
                <el-option label="正常" value="1"></el-option>
                <el-option label="禁止登录" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="userListData" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="name" label="名称" align="center">
      </el-table-column>
      <!-- <el-table-column
        prop="profile"
        label="用户头像"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <img
            :src="scope.row.profile"
            alt=""
            :style="{ width: 40 + 'px', height: 40 + 'px' }"
          />
        </template>
      </el-table-column> -->
      <el-table-column prop="role" label="用户类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.role == "user" ? "用户" : "管理员" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="register_date" label="注册时间" align="center">
      </el-table-column>
      <el-table-column prop="status" label="用户状态" align="center">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.status == 1 ? 'green' : 'red' }">{{
            scope.row.status == 1 ? "正常" : "禁止登录"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column width="400" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
            :style="{ color: scope.row.status == 1 ? 'red' : 'green' }"
            >{{
              scope.row.status == 1 ? "禁止用户登录" : "恢复用户登录"
            }}</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button
            type="text"
            size="small"
            @click="lookCheckHistory(scope.row)"
          >
            查看该用户检测历史
          </el-button>
          <el-divider direction="vertical"></el-divider>

          <el-popconfirm
            confirm-button-text="是的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除该用户吗？"
            @confirm="deleteUser(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">
              删除该用户
            </el-button>
          </el-popconfirm>

          <el-divider direction="vertical"></el-divider>

          <el-popconfirm
            confirm-button-text="是的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="确定重置该用户密码吗？"
            @confirm="resetUser(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">
              重置用户密码
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="userListData.length"
      :current-page.sync="params.pageNum"
      :page-size="params.pageSize"
      @size-change="
        (e) => {
          params.pageSize = e;
          getList();
        }
      "
      @current-change="
        (e) => {
          params.pageNum = e;
          getList();
        }
      "
      align="right"
      :style="{ marginTop: 30 + 'px' }"
    >
    </el-pagination>
    <LineChart
      v-if="lineChartShow"
      :dialogVisible="lineChartShow"
      :userId="userId"
      @handleClose="
        (val) => {
          lineChartShow = false;
        }
      "
    ></LineChart>
  </div>
</template>

<script>
import LineChart from "./lineChart.vue";

export default {
  props: {},
  data() {
    return {
      userListData: [],
      params: {
        name: "",
        role: "",
        status: "",
        pageNum: 1,
        pageSize: 10,
      },
      lineChartShow: false,
      userId: "",
    };
  },
  components: {
    LineChart,
  },

  mounted() {
    this.getList();
  },
  methods: {
    //此处是调取用户信息列表的接口
    getList() {
      axios
        .post("http://localhost:8080/admin/findUserBySearch", this.params)
        .then((res) => {
          if (res.code == 1) {
            this.userListData = res.data.list;
          }
        });
    },
    //此处是处理用户的登录或禁止状态的
    handleClick(val) {
      //若用户此时是禁止状态，则点击按钮后，将用户状态改为登陆状态
      if (val.status == 1) {
        axios
          .post("http://localhost:8080/admin/updateByUserId", {
            id: val.id,
            status: 2,
          })
          .then((res) => {
            if (res.code == 1) {
              this.getList();
            }
          });
      }
      //else同上相反情况
      else {
        axios
          .post("http://localhost:8080/admin/updateByUserId", {
            id: val.id,
            status: 1,
          })
          .then((res) => {
            if (res.code == 1) {
              this.getList();
            }
          });
      }
    },
    //此处是查看用户的检测历史记录的
    lookCheckHistory(val) {
      this.userId = val.id;
      this.lineChartShow = true;
    },
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    deleteUser(val) {
      axios
        .post(`http://localhost:8080/admin/deleteById/${val.id}`)
        .then((res) => {
          if (res.code == 1) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getList();
          }
        });
    },
    resetUser(val) {
      axios
        .post(`http://localhost:8080/admin/resetUserPassword/${val.id}`)
        .then((res) => {
          if (res.code == 1) {
            this.$message({
              message: "重置密码成功!!,用户新密码是" + res.data,
              type: "success",
            });
            this.getList();
          }
        });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.userDataPage {
  .searchBox {
    margin: 20px 0 50px;
    display: flex;
    justify-content: space-between;
    .el-form {
      width: 100%;
      .el-row {
        display: flex;
        justify-content: space-between;
        .el-form-item {
          display: flex;
          /deep/.el-form-item__label {
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
